<template>
  <div class="measured-stage-data" style="border-style:groove">
    <div style="font-size: 18px; font-weight: bold; color: #333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 5px; padding: 10px; text-align: center;">
      C#实测阶段数据
    </div>
    <el-table :data="tableData" border style="width: 100%" height="350" class="custom-table">
      <el-table-column prop="stepNo" label="阶段序号" width="65"></el-table-column>
      <el-table-column prop="stepName" label="阶段名称" width="90"></el-table-column>
      <el-table-column prop="stepTp" label="时间累计 (min)" width="90"></el-table-column>
      <el-table-column prop="plc1" label="实际温度上 (℃)" width="90"></el-table-column>
      <el-table-column prop="plc2" label="实际温度中 (℃)" width="90"></el-table-column>
      <el-table-column prop="plc3" label="实际温度下 (℃)" width="95"></el-table-column>
      <el-table-column prop="plc4" label="实际载气量 (L/min)" width="95"></el-table-column>
      <el-table-column prop="plc5" label="实际氢气量 (L/min)" width="95"></el-table-column>
      <el-table-column prop="plc6" label="实际碳源量 (L/min)" width="95"></el-table-column>
      <el-table-column prop="plc7" label="实际水流量 (g/min)" width="95"></el-table-column>
      <el-table-column prop="plc8" label="实际氢气含量 (%)" width="90"></el-table-column>
      <el-table-column prop="state" label="阶段状态" ></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import emitter from "@/utils/eventBus.ts";
interface TableRow {
  id: string;
  euid: string;
  stepNo: number;
  stepName: string;
  stepTp: number;
  plc1: number;
  plc2: number;
  plc3: number;
  plc4: number;
  plc5: number;
  plc6: number;
  plc7: number;
  plc8: number;
  state: string;
}
export default defineComponent({
  setup() {
    let eid = ref("")
    let flag = ref(false)
    const {proxy}: any = getCurrentInstance()
    const tableData = ref<TableRow[]>()
    // 定义一个函数，用于调用接口获取试验状态
    const getExperimentStatus = async () => {
      try {
        // 调用接口获取试验状态
        const response = await proxy.$api.PlcUrlc['isRunning']();
        flag = response
        emitter.emit('isRunningCline', response)
        if (response) {
          // 调用接口获取列表数据
          const response = await proxy.$api.PlcDataURl['list'](eid);
          // 更新列表数据
          if (response && response.result !== null) {
            // 将接口返回的数据更新到 experimentInfo 中
            tableData.value = response.result;
          }
          const responseStatistics = await proxy.$api.CountURl['getById'](eid);
          // 监听获取实验信息的事件
          if (responseStatistics && responseStatistics.result !== null) {
          emitter.emit('setStatisticsDataCline', responseStatistics.result)
          }
        }
      } catch (error) {
        console.error(error);
      }
    };
    let timer = ref()
    let first = ref(true)
    onMounted(async () => {
      emitter.on('Ceid', (id) => {
        if (first.value) {
          tableData.value = []
        }
        console.log('获取到的实验信息:', tableData.value);
        eid = id
        console.log('获取到的实验信息:id', eid);
        timer = setInterval(getExperimentStatus, 1000);
      })

    })
// 组件卸载时清理事件监听，防止内存泄漏
    onUnmounted(() => {
      emitter.off('experimentInfoDataCline')
      clearInterval(timer);
    })
    return {
      tableData
    }
  }
})
</script>

<style scoped>
.measured-stage-data {
  width: 99%;
}
::v-deep.el-table th {
  background-color: #f0f0f0; /* 表头背景色 */
  color: #333; /* 表头文字颜色 */
  font-weight: bold; /* 表头文字加粗 */
}
.custom-table {
  overflow: auto; /* 允许滚动 */
}
.custom-table::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}
.custom-table::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滚动条滑块圆角 */
}
.custom-table::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* 滚动条轨道颜色 */
}
</style>
